<template>
	<view>
		<van-loading v-if="requestStatus" type="spinner" size="40px" color="deepskyblue" />
		<!-- 搜索订单区域 -->
		<view class="search-area">
			<van-search :value="searchValue" placeholder="请输入搜索关键词" use-action-slot background="#fff" @change="changeSearchValue" @clear="getUserOrders">
			  <view slot="action" @click="getUserOrders">搜索</view>
			</van-search>
		</view>
		<!-- tabbar标签 -->
		<van-tabs :active="activeTabbarIndex" @change="changeTabbarItem" sticky animated>
		  <van-tab title="全部">
				<block v-for="item in orderList" :key="item.orderid">
					<shop-order :order="item">
						<template v-slot:btn>
							<van-button size="small" type="default" @click="gotoOrderDetail(item)">更多信息</van-button>
							<van-button size="small" type="default">查看详情</van-button>
							<van-button :disabled="!(item.finish && !item.iscomment)" size="small" type="default" @click="gotoNewComment(item)">前往评价</van-button>
						</template>
					</shop-order>
				</block>
			</van-tab>
		  <van-tab title="待收货">
				<block v-for="item in orderList.filter(item => !item.finish)" :key="item.orderid">
					<shop-order :order="item">
						<template v-slot:btn>
								<van-button size="small" type="default" @click="gotoOrderDetail(item)">更多信息</van-button>
								<van-button size="small" type="default">查看详情</van-button>
								<van-button :disabled="true" size="small" type="default" @click="gotoNewComment(item)">前往评价</van-button>
							</template>
						</shop-order>
					</shop-order>
				</block>
			</van-tab>
		  <van-tab title="待评价">
				<block v-for="item in orderList.filter(item => item.finish && !item.iscomment)" :key="item.orderid">
					<shop-order :order="item">
						<template v-slot:btn>
								<van-button size="small" type="default" @click="gotoOrderDetail(item)">更多信息</van-button>
								<van-button size="small" type="default">查看详情</van-button>
								<van-button :disabled="!(item.finish && !item.iscomment)" size="small" type="default" @click="gotoNewComment(item)">前往评价</van-button>
							</template>
						</shop-order>
					</shop-order>
				</block>
			</van-tab>
		  <van-tab title="已完成">
				<block v-for="item in orderList.filter(item => item.finish && item.iscomment)" :key="item.orderid">
					<shop-order :order="item">
						<template v-slot:btn>
								<van-button size="small" type="default" @click="gotoOrderDetail(item)">更多信息</van-button>
								<van-button size="small" type="default">查看详情</van-button>
								<van-button :disabled="true" size="small" type="default" @click="gotoNewComment(item)">前往评价</van-button>
							</template>
						</shop-order>
					</shop-order>
				</block>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		onLoad(state) {
			this.getUserOrders()
			this.activeTabbarIndex = state.index
		},
		data() {
			return {
				// 存储用户的订单信息列表
				orderList: [],
				// 当前激活的tabbar标签页数
				activeTabbarIndex: 0,
				// 搜索框的绑定值
				searchValue: '',
				// 请求状态
				requestStatus: false,
			}
		},
		methods: {
			// 获取用户订单信息列表
			async getUserOrders() {
				if(this.requestStatus) return
				this.requestStatus = true
				const { data: res } = await uni.$http.get('/user/orders', { uid: uni.getStorageSync('uid'), query: this.searchValue })
				if(res.meta.status !== 200) { 
					return uni.showToast({
						title: '选项值信息失败',
						icon: 'error',
						duration: 1000
					})
				}
				this.orderList = res.recordset
				this.requestStatus = false
			},
			// 选中标签页切换时触发
			changeTabbarItem(e) {
				this.activeTabbarIndex = e.detail.index
			},
			// 搜索框中的字体发生变化后触发
			changeSearchValue(e) {
				this.searchValue = e.detail
			},
			// 当单项订单大致信息被点击后跳转至订单详情页
			gotoOrderDetail(item) {
				uni.navigateTo({
					url: `/subpages/orderdetail/orderdetail?orderid=${ item.orderid }&gid=${ item.goodsid }&gimg=${ item.goodsimg }&gname=${ item.goodsname }&gprice=${ item.goodsbaseprice }&mname=${ item.merchantsname }`
				})
			},
			// 点击前往评价按钮时触发  跳转至评价生成页面
			gotoNewComment(item) {
				uni.navigateTo({
					url: `/subpages/newcomment/newcomment?gid=${ item.goodsid }&cid=${ item.choiceid }&gimg=${ item.goodsimg }&gname=${ item.goodsname }&cname=${ item.choicename }&oid=${ item.orderid }`
				})
			}
		}
	}
</script>

<style>
	.van-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.van-button {
		margin: 0 5px;
	}
</style>
